// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'
// 创建一个路由器
const router = new VueRouter({
    routes:[
        {
            name:'aboutP',//路由的名字一旦命名完成后，路径可以不用写那么长，特别是多级的时候
            // 写的会比较麻烦，这样可以节约时间
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                // 子路由的path就无须 / 开头了
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'detailP',
                            path:'detail/:id/:title',
                            // path:'detail',
                            component:Detail,
                            /*
                            props的第一种写法，值为对象，该对象中的所有key和value
                            都会以props形式传递给Detail组件
                            */
                        //    props:{a:1,b:'hello'} 死数据，不常用
                            /*第二种写法，值为布尔值，若布尔值为真，则会将该路由受到的
                            所有的params参数，以props形式传递给组件 */
                            // props:true,
                            /**
                             * 第三种写法，值为函数
                             */
                            // props($route){
                                props({params:{id,title}}){
                                    // 结构赋值的连续写法
                                // return {
                                //     id:666,
                                //     title:"你"
                                // }
                                // 
                                // return $route.query
                                // return $route.params
                                return {id,title}
                            }
                        }
                    ]
                },
                {
                    path:'news',
                    component:News
                }
            ]
        }
    ]
})

export default router